<template>
  <view class="container">
		<u-sticky bgColor="#F9F9F9">
			<view class="search-box">
				<u-search
					v-model="listParams.name"
					:showAction="false"
					bgColor="#F1F1F1"
					placeholder="请输入課程名稱"
					disabled
					@click="handleSearch"
				/>
			</view>
			<view v-if="classifyData.list.length" class="classify-box">
				<u-tabs
					:current="classifyData.current"
					:list="classifyData.list"
					:activeStyle="{ color: '#E9930A' }"
					keyName="dictLabel"
					lineColor="#E9930A"
					@change="changeTab"
				>
					<view
						v-if="(classifyData.current + 1) < classifyData.list.length"
						slot="right"
						style="padding: 0 10rpx;"
						@tap="handleTabRight"
					>
						<u-icon name="arrow-right" size="21" bold />
					</view>
				</u-tabs>
			</view>
		</u-sticky>
		<view class="courses-list flex-space-b flex-wrap">
			<course-column
				v-for="item in listData"
				:key="item.id"
				:item="item"
			/>
			<view v-if="listData.length === 0" class="empty-box flex-center">
				<u-empty
					mode="list"
					text="暫無課程"
				/>
			</view>
		</view>
		<!-- 自定义tabbar -->
		<tabbar :current="2" />
		<!-- 登录弹窗 -->
		<login-pop />
		<!-- 协议弹窗 -->
		<protocol-pop />
	</view>
</template>

<script>
	import tabbar from '@/components/Tabbar/index'
	import CourseColumn from '@/components/Course/column'
	import { queryBtCourse } from '@/api/course'
	import { getDictlist } from '@/api/home'
  export default {
		components: {
			tabbar,
			CourseColumn
		},
		data() {
			return {
				listParams: {
				  pageNum: 1,
				  pageSize: 10,
					typeId: '',
					weeks: '',
					code_query_startdate: '',
					code_query_class: '',
					code_query_startdateBegin: '',
					code_query_startdateEnd: '',
				  sort: 'sorder',
				  sortType: 'desc'
				},
				listData: [],
				loadData: {
				  status: 'loading',
				  loadingText: '努力加載中',
				  nomoreText: '沒有更多了'
				},
				classifyData: {
					current: 0,
					list: []
				}
			}
		},
		async onLoad() {
			this.initPage()
			this.getClassifyList()
		},
		methods: {
			initPage(params) {
				if (params) {
					Object.assign(this.listParams, params)
				}
			  this.listData = []
			  this.listParams.pageNum = 1
			  Object.assign(this.loadData, {
			    status: 'loading'
			  })
			  this.getList()
			},
			async getList() {
			  const { pageNum, pageSize } = this.listParams
				const listParams = JSON.parse(JSON.stringify(this.listParams))
				listParams.typeId = listParams.typeId == 0 ? '' : listParams.typeId
			  const { data } = await queryBtCourse(listParams)
			  if (data.result.length === 0 && pageNum === 1) {
			    this.loadData.status = 'nodata'
			    this.listData = []
			    return
			  }
			  if (data.result.length < pageSize) {
			    this.loadData.status = 'nomore'
			  }
			  this.listParams.pageNum++
			  this.listData = this.listData.concat(data.result)
			},
			async getClassifyList() {
				const { data } = await getDictlist({
					dictType: 'sql_bd_coursetype'
				})
				this.classifyData.list = [{
					dictValue: '',
					dictLabel: '全部'
				}, ...data.result]
				uni.setStorageSync('classifyList', [{
					dictValue: '0',
					dictLabel: '全部'
				}, ...data.result])
			},
			changeTab(e) {
				this.classifyData.current = e.index
				this.listParams.typeId = e.dictValue ? Number(e.dictValue) : ''
			  this.initPage()
			},
			handleSearch() {
				this.$navigator(`/pages/course/search?listParams=${JSON.stringify(this.listParams)}`)
			},
			handleTabRight() {
				if (this.classifyData.current + 1 < this.classifyData.list.length) {
					this.classifyData.current++
					this.listParams.typeId = this.classifyData.list[this.classifyData.current].dictValue
					this.initPage()
				}
			}
		},
		onReachBottom() {
		  if (this.loadData.status === 'loading') {
		    this.getList()
		  }
		},
		async onShareTimeline() {
			return {
				title: '柏圖教育',
				path: `/pages/course/index`
			}
		},
		async onShareAppMessage() {
			return {
				title: '柏圖教育',
				path: `/pages/course/index`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F9F9F9;
	}
	.search-box {
		padding: 32rpx 20rpx 16rpx;
	}
	.classify-box {
		height: 88rpx;
		background-color: #fff;
		/deep/ .u-tabs__wrapper__nav__line {
			bottom: 8rpx;
		}
	}
	.empty-box {
		width: 100%;
		height: 60vh;
	}
	.courses-list {
		padding: 0 20rpx;
	}
</style>
